<template>
    <div id="app">
        <NavHeader></NavHeader>
        <div class="main-container" v-if="data.length>0">
            <div class="animation-card" @click="jump(item.url)"  v-for="item, index in data" :key="index">
                <img :src="item.cover">
                <!-- <img src="http://i0.hdslb.com/bfs/bangumi/image/ab9dba31e9ca45012a44625327b6c1239005fbd4.png" alt=""> -->
                <div class="animation-white"></div>
                <div class="animation-title">
                    <p>{{item.title}}</p>
                </div>
            </div> 
        </div>
        <div v-else>
            <div class="loading-background">
                <Col class="demo-spin-col" span="8">
                    <Spin fix>
                        <Icon type="ios-loading" size=100 class="demo-spin-icon-load"></Icon>
                        <div>加载中....</div>
                    </Spin>
                </Col>
            </div>
        </div>
    </div>
</template>

<script>

import {getAnimationList} from '@/api/index'

export default {
    name: 'Animation',
    data(){
        return {
            data: [
                // {
                //     title: "异世界迷宫黑心企业",
                //     cover: "http://i0.hdslb.com/bfs/bangumi/image/ab9dba31e9ca45012a44625327b6c1239005fbd4.png",
                //     evaluate: "「不想工作！」\n在这样的想法下不断努力，靠着不劳而获的收入成为了「上流家里蹲」的二之宫锦司。\n正在他打算到死为止都要这样懒惰地生活下去时……出于某种原因突然穿越到异世界！\n那里是一个「迷宫就是职场」的...",
                //     url: "https://www.bilibili.com/bangumi/play/ss38934"
                // }
            ]
        }
    },
    mounted(){
        this.getList()
        console.log(this.data.length)
        console.log(this.data.length>0)
    },
    methods: {
        getList: function(){
            getAnimationList().then(res=>{
                console.log(res.data.data)
                this.data = res.data.data
            })
        },
        jump: function(url){
            window.open(url);           
        }
    }
}
</script>

<style scoped>
.main-container{
    margin-top: 20px;
    flex-wrap: wrap;
    width: 80%;
    margin: auto;
    text-align: center;
}

.animation-card{
    width: 340px;
    height: 450px;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    margin: 20px;
    display: -webkit-inline-box;
    box-shadow: 5px 3px 15px #353535;
}

.animation-white{
    position:absolute;
    bottom: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 50px;
    border-top: 1px solid rgb(97, 97, 97);
}

.animation-title{
    position:absolute;
    z-index:2;
    left:50%;
    bottom: 12px;
    transform: translate(-50%);
    color: black;
}

.animation-title p{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    white-space:nowrap;
}

.animation-card img{
    width: 100%;
    height: auto;
    transition: 0.3s;
}

.animation-card img:hover{
    transform: scale(1.15);
}

.loading-background{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(255, 255, 255, 0.6);
    top: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    transition: 0.3s;
}

.demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}
.demo-spin-col{
    height: 100px;
    position:absolute;
    z-index:2;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}
</style>